<template>
  <div class="ui card fluid">
      <div class="content">
          <div class="ui form">
              <div class="field">
                  <div class="ui left icon transparent input">
                      <input type="text" placeholder="title" v-model="title">
                      <i class="pencil icon"></i>
                  </div>
                  <textarea v-model="content" style="white-space: pre-line;"></textarea>
                  <button class="ui fluid right floated button" v-on:click="(event) => createArticle(event, title, content, userId)">SUBMIT ARTICLE</button>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
//  实现父组件向子组件提供数据
  props: ['userId'],
  data () {
    return {
      title: '',
      content: '',
      newArticle: []
    }
  },
  methods: {
  /**
   * 向后端发起提交新文章
   * @param {*} event 事件
   * @param {*} title 文章的标题
   * @param {*} content 文章的内容
   * @param {*} userId 文章的发表者
   */
    createArticle: function (event, title, content, userId) {
      if (userId === '') {
        alert('select a user first.')
        return
      }
      if (title === '') {
        alert('title can not be empty.')
        return
      }
      if (content === '') {
        alert('content can not be empty.')
        return
      }
      this.$axios({
        method: 'post',
        headers: {
        // 'Expect': '100-continue',
          'Content-Type': 'application/json;charset=utf-8'
        },
        url: this.$backend + '/user/' + this.userId + '/article',
        data: {'title': title, 'content': content}
      }).then((response) => {
        alert('new article created.')
        this.title = ''
        this.content = ''
        this.$emit('startrefresharticlelist', userId)
      }).catch((error) => {
        console.log(error.response.status)
        console.log(error.response.statusText)
      })
    }
  }
}
</script>

<style scoped>
</style>
